<template>
  <div>
    <el-card class="mb10 mt10">
      <div slot="header" class="clearfix" v-if="handoverOptions && handoverOptions.length > 0">
        <el-button type="warning" icon="el-icon-printer" size="mini" class="fr ml10"
                   @click="handlePrint(taskNoTitle+form.taskNo)"
        >下载打印
        </el-button>
        <el-button type="primary" icon="el-icon-view" size="mini" class="fr" @click="handlePrintInfo()">在线查看</el-button>
      </div>
      <div ref="printHandover" id="printHandover">
        <el-card id="handoverCard" class="box-card" style="padding: 50px 2vw 30px 2vw;background-color:#fff;"
                 shadow="never"
        >
          <div slot="header"
               style="text-align: center;font-size:18px;margin-bottom: 20px;font-weight: 800;padding-bottom: 15px;"
          >
            <span v-if="form.type == '0' && !form.returnId">涉案财物入库确认清单</span>
            <span v-if="form.type == '0' && form.returnId">涉案财物归还确认清单</span>
            <span v-if="form.type == '1'">涉案财物移送确认清单</span>
            <span v-if="form.type == '2'">涉案财物处置确认清单</span>
            <span v-if="form.type == '3'">涉案财物调用确认清单</span>
            <el-button v-if="handoverOptions == undefined || handoverOptions.length == 0" type="warning"
                       icon="el-icon-printer" circle size="mini" class="fr"
                       @click="handlePrint(taskNoTitle+form.taskNo)"
            ></el-button>
          </div>
          <el-descriptions :column="3" class="mb10 mt10"
                           :labelStyle="{'backgroundColor':'#fff','fontSize':'16px','fontWeight':'bold','align-items': 'center'}"
                           :contentStyle="{'fontSize':'16px','fontWeight':'bold','align-items': 'center'}"
          >
            <el-descriptions-item label="订单编号"  :contentStyle="{'fontSize':'20px','fontWeight':'bold'}">{{ form.taskNo }}</el-descriptions-item>
            <el-descriptions-item label="配送类型">
              <template v-if="form.type == '0'">
                <template v-for="dict in dict.type.oms_in_delivery_type">
                  <span v-if="dict.value == form.delivery">{{ dict.label }}</span>
                </template>
              </template>
              <template v-else>
                <template v-for="dict in dict.type.oms_out_delivery_type">
                  <span v-if="dict.value == form.delivery">{{ dict.label }}</span>
                </template>
              </template>
            </el-descriptions-item>
            <el-descriptions-item label="下单时间">{{ parseTime(form.createTime) }}</el-descriptions-item>
            <!-- 第一列 -->
            <template v-if="form.type == '0'">
              <el-descriptions-item v-if="form.returnId" label="调用单编号">{{ form.transferNo }}</el-descriptions-item>
              <el-descriptions-item v-if="!form.returnId && form.delivery == '0'" label="调度人">{{ form.dispatcher }}
              </el-descriptions-item>
              <el-descriptions-item v-if="!form.returnId && form.delivery == '1'" label="移送单位" :span="2">
                {{ form.deptName }}
              </el-descriptions-item>
            </template>
            <template v-if="form.type == '1'">
              <el-descriptions-item label="移送原因">{{ form.remark }}</el-descriptions-item>
            </template>
            <template v-if="form.type == '2'">
              <el-descriptions-item label="调度人" v-if="form.delivery == '0'">{{ form.dispatcher }}</el-descriptions-item>
              <el-descriptions-item label="移送单位" v-if="form.delivery == '1'" :span="2">{{ form.storeDeptName }}
              </el-descriptions-item>
            </template>
            <template v-if="form.type == '3'">
              <el-descriptions-item label="调用原因">{{ form.dispatchRemark }}</el-descriptions-item>
            </template>
            <!-- 第二列 -->
            <template v-if="form.type == '0' && form.delivery == '0' && !form.returnId">
              <el-descriptions-item label="移送单位">{{ form.deptName }}</el-descriptions-item>
            </template>
            <template v-if="form.type == '0' && form.delivery == '1' && form.returnId">
              <el-descriptions-item label="移送单位">{{ form.deptName }}</el-descriptions-item>
            </template>
            <template v-if="form.type != '2' && form.type != '0'">
              <el-descriptions-item label="移送单位">{{ form.storeDeptName }}</el-descriptions-item>
            </template>
            <template v-if="form.type == '2' && form.replaceNo">
              <el-descriptions-item label="调用转处置">{{ form.replaceNo }}</el-descriptions-item>
            </template>
            <!-- 第三列 -->
            <template v-if="form.type == '0'">
              <el-descriptions-item label="接收单位">{{ form.storeDeptName }}</el-descriptions-item>
            </template>
            <template v-else>
              <el-descriptions-item label="接收单位">{{ form.deptName }}</el-descriptions-item>
            </template>
            <template v-if="form.type == '0'">
              <el-descriptions-item label="调度人" v-if="form.returnId && form.delivery == '0'">{{ form.dispatcher }}
              </el-descriptions-item>
            </template>
            <template v-if="form.type == '1' || form.type == '3'">
              <el-descriptions-item label="调度人" v-if="form.delivery == '0'">{{ form.dispatcher }}</el-descriptions-item>
            </template>
            <template v-if="form.type == '1' || form.type == '3'">
              <el-descriptions-item label="是否取证">{{ form.evidence == '0' ? '否' : '是' }}</el-descriptions-item>
            </template>
            <template v-if="form.type == '1' || form.type == '3'">
              <el-descriptions-item label="签收人">{{ form.signeeName }}</el-descriptions-item>
            </template>
          </el-descriptions>
          <el-table :data="form.items" border
                    :headerCellStyle="{'backgroundColor':'#fff','fontSize':'16px','fontWeight':'bold'}"
                    :cell-style="{'fontSize':'16px','fontWeight':'bold','border-bottom':'1px soild #000'}"
          >
            <el-table-column label="序号" type="index" width="60" align="center"/>
            <el-table-column label="财物编号" prop="pno" width="260" align="center"/>
            <el-table-column label="财物名称" prop="name" width="220" align="center"/>
            <el-table-column v-if="form.type != '0' || form.returnId" label="数量" prop="nums" width="75" align="center"/>
            <el-table-column v-if="form.type == '2'" label="处置类型" align="center" prop="dealType" width="125">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.deal_type" :value="scope.row.dealType"/>
              </template>
            </el-table-column>
            <el-table-column label="特征" prop="character" header-align="center"/>
            <template v-if="form.type == '0' && !form.returnId">
              <el-table-column label="登记数" align="center" width="125">
                <template slot-scope="scope">
                  {{ scope.row.nums }}
                </template>
              </el-table-column>
              <el-table-column label="接收数及单位" align="center" width="125">
                <template slot-scope="scope">
                  {{ scope.row.handoverUnit ?scope.row.handoverNums +scope.row.handoverUnit :'' }}
                </template>
              </el-table-column>
              <el-table-column label="鉴定" align="center" width="80">
                <template slot-scope="scope">
                  {{ scope.row.handoverUnit ? scope.row.evaluate ? '是' : '否' : '' }}
                </template>
              </el-table-column>
            </template>
          </el-table>
          <template v-if="form.type == '0'">
            <el-row v-if="form.propertyType == 3" class="mt20">
              <el-col :span="12"><strong>已确认对车厢进行清理，车内无其它与车辆无关的随车物品</strong></el-col>
              <el-col :span="4" v-if="form.carKey"><strong>{{ form.carKey }}</strong></el-col>
              <el-col :span="4" v-if="form.driveLicen"><strong>{{ form.driveLicen }}</strong></el-col>
              <el-col :span="4" v-if="form.registerBook"><strong>{{ form.registerBook }}</strong></el-col>
            </el-row>
          </template>
          <template v-if="handoverOptions == undefined || handoverOptions.length == 0">
            <template v-if="form.type === '0'">
              <el-row class="mt20">
                <el-col :span="8" style="padding: 10px 15px;">
                  <div class="mb5">
                    <span>办案单位移送人签字</span>
                  </div>
                  <span>
                      <el-image class="imgSize" :src="require('@/assets/images/default-img.png')"/>
                      <span>签字时间：</span>
                    </span>
                </el-col>
                <el-col :span="8" style="padding: 10px 15px;">
                  <div class="mb5">
                    <span>中心押运员签字</span>
                  </div>
                  <span>
                      <el-image class="imgSize" :src="require('@/assets/images/default-img.png')"/>
                      <span>签字时间：</span>
                    </span>
                </el-col>
                <el-col :span="8" style="padding: 10px 15px;">
                  <div class="mb5">
                    <span>中心保管员签字</span>
                  </div>
                  <el-image class="imgSize" :src="require('@/assets/images/default-img.png')"/>
                  <span>签字时间：</span>
                </el-col>
              </el-row>
            </template>
            <template v-else-if="form.type == '2' && form.isTrailer == '1'">
              <el-row class="mt20">
                <el-col :span="8" style="padding: 10px 15px;">
                  <div class="mb5">
                    <span>中心保管员签字</span>
                  </div>
                  <span>
                      <el-image class="imgSize" :src="require('@/assets/images/default-img.png')"/>
                      <span>签字时间：</span>
                    </span>
                </el-col>
                <el-col :span="8" style="padding: 10px 15px;">
                </el-col>
                <el-col :span="8" style="padding: 10px 15px;">
                  <div class="mb5">
                    <span>接收人签字</span>
                  </div>
                  <el-image class="imgSize" :src="require('@/assets/images/default-img.png')"/>
                  <span>签字时间：</span>
                </el-col>
              </el-row>
            </template>
            <template v-else>
              <el-row class="mt20">
                <el-col :span="8" style="padding: 10px 15px;">
                  <div class="mb5">
                    <span>中心保管员签字</span>
                  </div>
                  <span>
                      <el-image class="imgSize" :src="require('@/assets/images/default-img.png')"/>
                      <span>签字时间：</span>
                    </span>
                </el-col>
                <el-col :span="8" style="padding: 10px 15px;">
                  <div class="mb5">
                    <span>中心押运员签字</span>
                  </div>
                  <span>
                    <el-image class="imgSize" :src="require('@/assets/images/default-img.png')"/>
                  </span>
                  <span>签字时间：</span>
                </el-col>
                <el-col :span="8" style="padding: 10px 15px;">
                  <div class="mb5">
                    <span>办案单位签收人签字</span>
                  </div>
                  <el-image class="imgSize" :src="require('@/assets/images/default-img.png')"/>
                  <span>签字时间：</span>
                </el-col>
              </el-row>
            </template>
          </template>
          <template v-if="handoverOptions && handoverOptions.length > 0">
            <template v-for="item in handoverOptions">
              <template v-if="form.type == '0'">
                <el-row class="mt20">
                  <el-col :span="8" style="padding: 10px 15px;">
                    <div class="mb5">
                      <span>办案单位移送人签字</span>
                    </div>
                    <span>
                        <el-image v-if="item.signs" class="imgSize" :src="getPictureHost()+item.signs"
                                  :preview-src-list="[getPictureHost()+item.signs]"
                        />
                        <el-image v-else class="imgSize" :src="require('@/assets/images/default-img.png')"/>
                        <span>{{ '签字时间：' + (item.pickUpTime && item.signs ? item.pickUpTime : '') }}</span>
                      </span>
                  </el-col>
                  <el-col :span="8" style="padding: 10px 15px;">
                    <div v-if="form.delivery ==='0'">
                      <div class="mb5">
                        <span>中心押运员签字</span>
                      </div>
                      <span>
                        <el-image v-if="item.handPics" class="imgSize" :src="getPictureHost()+item.handPics"
                                  :preview-src-list="[getPictureHost()+item.handPics]"
                        />
                        <el-image v-else class="imgSize" :src="require('@/assets/images/default-img.png')"/>
                        <span>{{ '签字时间：' + (item.pickUpTime && item.handPics ? item.pickUpTime : '') }}</span>
                      </span>
                    </div>
                  </el-col>
                  <el-col :span="8" style="padding: 10px 15px;">
                    <div class="mb5">
                      <span>中心保管员签字</span>
                    </div>
                    <el-image v-if="item.checkSign" class="imgSize" :src="getPictureHost()+item.checkSign"
                              :preview-src-list="[getPictureHost()+item.checkSign]"
                    />
                    <el-image v-else class="imgSize" :src="require('@/assets/images/default-img.png')"/>
                    <span>{{ '签字时间：' + (item.arrivalTime && item.checkSign ? item.arrivalTime : '') }}</span>
                  </el-col>
                </el-row>
              </template>
              <template v-else-if="form.type == '2' && form.isTrailer == '1'">
                <el-row class="mt20">
                  <el-col :span="8" style="padding: 10px 15px;">
                    <div class="mb5">
                      <span>中心保管员签字</span>
                    </div>
                    <el-image v-if="(item.checkSign?item.checkSign:item.counterpartSign)" class="imgSize"
                              :src="getPictureHost()+(item.checkSign?item.checkSign:item.counterpartSign)"
                              :preview-src-list="[getPictureHost()+item.checkSign]"
                    />
                    <el-image v-else class="imgSize" :src="require('@/assets/images/default-img.png')"/>
                    <span>{{ '签字时间：' + (item.handTime) }}</span>
                  </el-col>
                  <el-col :span="8" style="padding: 10px 15px;">
                  </el-col>
                  <el-col :span="8" style="padding: 10px 15px;">
                    <div class="mb5">
                      <span>接收人签字</span>
                    </div>
                    <span>
                        <el-image v-if="item.signs" class="imgSize" :src="getPictureHost()+item.signs"
                                  :preview-src-list="[getPictureHost()+item.signs]"
                        />
                        <el-image v-else class="imgSize" :src="require('@/assets/images/default-img.png')"/>
                        <span>{{ '签字时间：' + (item.handTime) }}</span>
                      </span>
                  </el-col>
                </el-row>
              </template>
              <template v-else>
                <el-row class="mt20">
                  <el-col :span="8" style="padding: 10px 15px;">
                    <div class="mb5">
                      <span>中心保管员签字</span>
                    </div>
                    <el-image v-if="(item.checkSign?item.checkSign:item.counterpartSign)" class="imgSize"
                              :src="getPictureHost()+(item.checkSign?item.checkSign:item.counterpartSign)"
                              :preview-src-list="[getPictureHost()+item.checkSign]"
                    />
                    <el-image v-else class="imgSize" :src="require('@/assets/images/default-img.png')"/>
                    <span>{{
                        '签字时间：' + (item.pickUpTime && (item.checkSign ? item.checkSign : item.counterpartSign) ? item.pickUpTime : '')
                      }}</span>
                  </el-col>
                  <el-col :span="8" style="padding: 10px 15px;">
                    <div v-if="form.delivery ==='0'">
                      <div class="mb5">
                        <span>中心押运员签字</span>
                      </div>
                      <span>
                        <el-image v-if="item.handPics" class="imgSize" :src="getPictureHost()+item.handPics"
                                  :preview-src-list="[getPictureHost()+item.handPics]"
                        />
                        <el-image v-else class="imgSize" :src="require('@/assets/images/default-img.png')"/>
                        <span>{{ '签字时间：' + (item.pickUpTime && item.handPics ? item.pickUpTime : '') }}</span>
                      </span>
                    </div>
                  </el-col>
                  <el-col :span="8" style="padding: 10px 15px;">
                    <div class="mb5">
                      <span>办案单位签收人签字</span>
                    </div>
                    <span>
                        <el-image v-if="item.signs" class="imgSize" :src="getPictureHost()+item.signs"
                                  :preview-src-list="[getPictureHost()+item.signs]"
                        />
                        <el-image v-else class="imgSize" :src="require('@/assets/images/default-img.png')"/>
                        <span>{{ '签字时间：' + (item.arrivalTime && item.signs ? item.arrivalTime : '') }}</span>
                      </span>
                  </el-col>
                </el-row>
              </template>
            </template>
          </template>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
import { htmlToPdf, htmlToPdfInfo } from '@/utils/pdf.js'

export default {
  dicts: ['oms_in_delivery_type', 'deal_type', 'oms_out_delivery_type'],
  props: {
    form: {
      type: Object
    },
    handoverOptions: {
      type: Array
    }
  },
  data() {
    return {
      taskNoTitle: undefined
    }
  },
  created() {
    console.info('form============>', this.form)
    let form = this.form
    let taskNoTitle = undefined
    if (form.type == '0' && !form.returnId) {
      taskNoTitle = '涉案财物入库确认清单'
    } else if (form.type == '0' && form.returnId) {
      taskNoTitle = '涉案财物归还确认清单'
    } else if (form.type == '1') {
      taskNoTitle = '涉案财物移送确认清单'
    } else if (form.type == '2') {
      taskNoTitle = '涉案财物处置确认清单'
    } else if (form.type == '3') {
      taskNoTitle = '涉案财物调用确认清单'
    }
    this.taskNoTitle = taskNoTitle
  },
  methods: {
    /**
     * 附件打印
     */
    handlePrint(title) {
      htmlToPdf('#printHandover', title)
    },
    handlePrintInfo() {
      htmlToPdfInfo('#printHandover')
    }
  }
}
</script>

<style>
.imgSize {
  width: 100%;
  height: 150px;
}

#handoverCard.box-card .el-card__header {
  border-bottom-color: #000;
}

/**
改变边框颜色
 */
#handoverCard.box-card .el-table {
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  margin: 0 auto;
}

#handoverCard.box-card .el-table th {
  border: 1px solid black !important;
  border-right: none !important;
  border-bottom: none !important;
}

#handoverCard.box-card .el-table td {
  border: 1px solid black;
  border-right: none !important;
}
</style>
